﻿<Window x:Class="MotionRemix.Demo.Views.MainWindow"
        x:Name="MainTopWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:motionRemix="http://schemas.montion.remix/2014/xaml"
        Title="Motion Remix Demo" 
        Height="560" 
        Width="820">

    <Window.Resources>
        <ResourceDictionary Source="../Resources/Resources.xaml" />
    </Window.Resources>
    
    <Grid            
        x:Name="ContentLayoutRoot" 
        Background="{StaticResource MainColorBrush}">
        <TabControl 
            x:Name="ContentTab" 
            Style="{StaticResource ContentTablStyle}">
            
            <TabItem 
                x:Name="AnimationTab" 
                Style="{StaticResource HeaderTabItemStyle}"
                Header="Animations">
                <Grid 
                    x:Name="AnimationLayoutRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    
                    <TextBlock 
                        x:Name="LinearGradientOffsetAnimationText" 
                        Grid.Row="0"
                        Text="Gradient Brush Offset" 
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Left" 
                        Margin="4, 4, 0, 0"
                        Foreground="{StaticResource AnimationGradientBrush}"
                        FontFamily="{StaticResource MainFontFamily}" 
                        FontSize="{StaticResource LargeFontSize}">
                        <TextBlock.Triggers>
                            <EventTrigger RoutedEvent="Window.Loaded">
                                <BeginStoryboard>
                                    <Storyboard RepeatBehavior="Forever">
                                        <motionRemix:GradientBrushOffsetAnimation 
                                            Storyboard.TargetProperty="Foreground"
                                            Duration="0:0:1.2" 
                                            FillBehavior="Stop" 
                                            StartOffset="0.2">
                                            <motionRemix:GradientBrushOffsetAnimation.EasingFunction>
                                                <SineEase EasingMode="EaseInOut"/>
                                            </motionRemix:GradientBrushOffsetAnimation.EasingFunction>
                                        </motionRemix:GradientBrushOffsetAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </TextBlock.Triggers>
                    </TextBlock>
                    
                    <Ellipse 
                        x:Name="ColorAnimationUsingHsbcircle" 
                        Grid.Row="1" 
                        Width="30" 
                        Height="30" 
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Left" 
                        Margin="4, 4, 0, 0"
                        Fill="{StaticResource LightMainTitleBrush}">
                        <Ellipse.Triggers>
                            <EventTrigger RoutedEvent="Window.Loaded">
                                <BeginStoryboard>
                                    <Storyboard RepeatBehavior="Forever">
                                        <motionRemix:ColorAnimationUsingHsb 
                                            Storyboard.TargetName="ColorAnimationUsingHsbcircle" 
                                            Storyboard.TargetProperty="Fill.Color" 
                                            ReverseEffect="True"
                                            HueOffset="360"
                                            Duration="0:0:4" 
                                            BeginTime="0:0:0">
                                            <motionRemix:ColorAnimationUsingHsb.EasingFunction>
                                                <SineEase EasingMode="EaseInOut" />
                                            </motionRemix:ColorAnimationUsingHsb.EasingFunction>
                                        </motionRemix:ColorAnimationUsingHsb>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Ellipse.Triggers>
                    </Ellipse>
                    
                    <Rectangle 
                        x:Name="GradientBrushFlowRectangle" 
                        Grid.Row="2" 
                        Height="35"
                        Width="240"
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Left" 
                        Margin="4, 4, 0, 0" 
                        Fill="{StaticResource AnimationGradientFlowBrush}" >
                        <Rectangle.Triggers>
                            <EventTrigger RoutedEvent="Window.Loaded">
                                <BeginStoryboard>
                                    <Storyboard RepeatBehavior="Forever">
                                        <motionRemix:GradientBrushFlowAnimation 
                                            Storyboard.TargetName="GradientBrushFlowRectangle" 
                                            Storyboard.TargetProperty="Fill" 
                                            Duration="0:0:4" 
                                            BeginTime="0:0:0">
                                            <motionRemix:GradientBrushFlowAnimation.EasingFunction>
                                                <SineEase EasingMode="EaseInOut" />
                                            </motionRemix:GradientBrushFlowAnimation.EasingFunction>
                                        </motionRemix:GradientBrushFlowAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Rectangle.Triggers>
                    </Rectangle>

                    <Rectangle 
                        x:Name="GradientBrushWaveRectangle" 
                        Grid.Row="3" 
                        Height="35"
                        Width="240"
                        VerticalAlignment="Center" 
                        HorizontalAlignment="Left" 
                        Margin="4, 8, 0, 0" 
                        Fill="{StaticResource AnimationGradientWaveBrush}" >
                        <Rectangle.Triggers>
                            <EventTrigger RoutedEvent="Window.Loaded">
                                <BeginStoryboard>
                                    <Storyboard RepeatBehavior="Forever">
                                        <motionRemix:GradientBrushWaveAnimation 
                                            Storyboard.TargetName="GradientBrushWaveRectangle" 
                                            Storyboard.TargetProperty="Fill" 
                                            Repeat="3"
                                            Duration="0:0:2" 
                                            BeginTime="0:0:0">
                                            <motionRemix:GradientBrushWaveAnimation.EasingFunction>
                                                <SineEase EasingMode="EaseInOut" />
                                            </motionRemix:GradientBrushWaveAnimation.EasingFunction>
                                        </motionRemix:GradientBrushWaveAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Rectangle.Triggers>
                    </Rectangle>

                </Grid>
            </TabItem>
            
            <TabItem 
                x:Name="ShapesTab" 
                Style="{StaticResource HeaderTabItemStyle}"
                Header="Shapes">
                <Grid 
                    x:Name="ShapesLayoutRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Canvas 
                        x:Name="ShapesCanvas" 
                        Grid.Row="1">
                        <motionRemix:Spiral
                            x:Name="SpiralShape"
                            Canvas.Left="10"
                            Canvas.Top="10"
                            Height="160"
                            Width="160"
                            Opacity="0.16"
                            Velocity="0.15"
                            StartAngle="960"
                            Stroke="{StaticResource DarkForegroundBrush}"
                            StrokeThickness="1" />
                    </Canvas>
                </Grid>
            </TabItem>
            
            <TabItem 
                x:Name="EasingTab" 
                Style="{StaticResource HeaderTabItemStyle}"
                Header="Easing">
                <Grid 
                    x:Name="EasingRootGrid" 
                    Background="Transparent">
                    <Canvas x:Name="EasingCanvas">
                        
                        <Line 
                            x:Name="QuadraticBezierLineTrial"
                            Canvas.Left="10"
                            Canvas.Top="20"
                            X1="0" 
                            X2="250" 
                            Y1="0" 
                            Y2="0" 
                            StrokeThickness="1" 
                            Opacity="0.4" 
                            Stroke="{StaticResource DisabledForegroundBrush}" />
                        <Ellipse 
                            x:Name="QuadraticBezierLineCursor" 
                            Canvas.Left="5" 
                            Canvas.Top="15" 
                            Height="10" 
                            Width="10" 
                            Fill="{StaticResource DarkForegroundBrush}">
                            <Ellipse.Triggers>
                                <EventTrigger RoutedEvent="Window.Loaded">
                                    <BeginStoryboard>
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimation 
                                                Storyboard.TargetName="QuadraticBezierLineCursor" 
                                                Storyboard.TargetProperty="(Canvas.Left)" 
                                                From="5" 
                                                To="250" 
                                                Duration="0:0:1" 
                                                BeginTime="0:0:0">
                                                <DoubleAnimation.EasingFunction>
                                                    <motionRemix:QuadraticBezierEase 
                                                        Point0="10,20" 
                                                        Point1="81, 109" 
                                                        Point2="163, 105" 
                                                        Point3="154, 31" 
                                                        EasingMode="EaseIn" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Ellipse.Triggers>
                        </Ellipse>
                        
                        <Line 
                            x:Name="CubicBezierLineTrial"
                            Canvas.Left="10"
                            Canvas.Top="50"
                            X1="0" 
                            X2="250" 
                            Y1="0" 
                            Y2="0" 
                            StrokeThickness="1" 
                            Opacity="0.4" 
                            Stroke="{StaticResource DisabledForegroundBrush}" />
                        <Ellipse 
                            x:Name="CubicBezierLineCursor" 
                            Canvas.Left="5" 
                            Canvas.Top="45" 
                            Height="10" 
                            Width="10" 
                            Fill="{StaticResource DarkForegroundBrush}">
                            <Ellipse.Triggers>
                                <EventTrigger RoutedEvent="Window.Loaded">
                                    <BeginStoryboard>
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimation 
                                                Storyboard.TargetName="CubicBezierLineCursor" 
                                                Storyboard.TargetProperty="(Canvas.Left)" 
                                                From="5" 
                                                To="250" 
                                                Duration="0:0:1" 
                                                BeginTime="0:0:0">
                                                <DoubleAnimation.EasingFunction>
                                                    <motionRemix:CubicBezierEase 
                                                        Point0="10,10" 
                                                        Point1="195, 113" 
                                                        Point2="221, 15" 
                                                        EasingMode="EaseIn" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Ellipse.Triggers>
                        </Ellipse>
                        
                    </Canvas>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>
